<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/user.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2637533_vjktkq25brd.css">
</head>

<body>
    <header class="header">
        <div class="page-container clearfix">
            <ul class="nav-item">
                <li>
                    <a href="#">慕课网首页</a>
                </li>
                <li>
                    <a href="#">免费课</a>
                </li>
                <li>
                    <a href="#">实战课</a>
                </li>
                <li>
                    <a href="#">体系课</a>
                    <i class="icn-new"></i>
                </li>
                <li>
                    <a href="#">慕课教程</a>
                </li>
                <li>
                    <a href="#">专栏</a>
                </li>
                <li>
                    <a href="./index.html">手记</a>
                </li>
            </ul>
            <div class="header-right">
                <div class="search-box">
                    <a href="#">
                        <i class="iconfont icon-fangdajing fang-djing i"></i>
                    </a>
                    <div class="input-search">
                        <div class="input-box">
                            <input type="text" class="nav-search-input">
                            <a href="#">
                                <i class="iconfont icon-fangdajing i"></i>
                            </a>
                        </div>
                        <div class="nav-search-box hide">
                            <div class="hot">
                                <h2>热搜</h2>
                                <div class="hot-box">
                                    <a href="#">Java工程师</a>
                                    <a href="#">Vue</a>
                                    <a href="#">Python</a>
                                    <a href="#">Go</a>
                                    <a href="#">SpringBoot</a>
                                    <a href="#">Docker</a>
                                    <a href="#">React</a>
                                    <a href="#">小程序</a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header-favorites">
                    <a href="#" class="i">收藏网站</a>
                    <div class="favorites-tips">
                        <i class="iconfont icon-xing i"></i>
                        使用
                        <b>Ctrl+D </b>
                        可将网站添加到书签
                    </div>
                </div>
                <div class="gouwuche">
                    <i class="iconfont icon-gouwuche i"></i>
                </div>
                <div class="login-area">
                    <ul class="logined clearfix">
                        <li class="li-item">
                            <i class="iconfont icon-lingdang i"></i>
                        </li>
                        <li class="li-item">
                            <a href="#" class="i">我的课程</a>
                        </li>
                        <li class="li-item" id="personal-center">
                            <a href="#" id="header-avator">
                                <img src="/images//5333a08f0001700202000200-200-200.jpg" alt="" class="avator">
                            </a>
                            <div class="g-user-card">
                                <div class="card-inner">
                                    <div class="card-top clearfix">
                                        <a href="./user-cata.html">
                                            <img src="/images//5333a08f0001700202000200-200-200.jpg" alt=""
                                                class="avator">
                                        </a>
                                        <div class="card-top-right-box">
                                            <a href="#" id="name" class=" text-ellipsis">精慕门</a>
                                            <div class="meta">
                                                <a href="#">经验
                                                    <b class="js-user-mp">0</b>
                                                </a>
                                                <a href="#">
                                                    积分
                                                    <b class="js-user-credit">0</b>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="user-center-box">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <i class="iconfont icon-kecheng"></i>
                                                    我的课程
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="iconfont icon-dingdan"></i>
                                                    订单中心
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="iconfont icon-jifen"></i>
                                                    积分商城
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="iconfont icon-shezhitianchong"></i>
                                                    个人设置
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-sets clearfix">
                                        <a href="#">安全退出</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <main class="main">
        <div class="main-box">
            <div class="setting-left">
                <div class="avator-wapper">
                    <div class="avator-mode">
                        <img class="avator" src="https://img1.sycdn.imooc.com/5333a08f0001700202000200-200-200.jpg"
                            alt="">
                        <div class="update-avator">
                            <p>
                                <a href="#">更换头像</a>
                            </p>
                        </div>
                    </div>
                    <div class="edit-avator">
                        <div class="moco-modal-title">
                            <span>更换头像</span>
                            <a href="#" class="iconfont icon-cuowu-copy moco-modal-close"></a>
                        </div>
                        <div class="moco-modal-inner">
                            <div class="tpl-avator">
                                <div class="avator-wapper-big">
                                    <div class="avator-mode-big">
                                        <img class="avator" id="picture"
                                            src="./images//5333a08f0001700202000200-200-200.jpg" alt="">
                                    </div>
                                    <div class="w140">
                                        <a href="#" class="change">换一换</a>
                                        <form class="pull-right-avator" enctype="multipart/form-data">
                                            <a href="#" class="avator-btn-fake">上传头像</a>
                                            <input class="hide" type="file" name="fileField" id="upload">
                                        </form>
                                    </div>
                                    <div class="moco-control-avator">
                                        <a href="#" id="js-avator-save" class="moco-btn-blue">确定</a>
                                        <a href="#" class="moco-btn moco-btn-normal">取消</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="des-mode">
                        <p>精慕门</p>
                        <span></span>
                        <ul class="auth-list">
                            <li>
                                <i class="iconfont icon-gerentouxiang_o"></i>
                            </li>
                            <li>
                                <i class="iconfont icon-w_xuewei-"></i>
                            </li>
                            <li>
                                <i class="iconfont icon-shouji"></i>
                            </li>
                            <li>
                                <i class="iconfont icon-xinfeng"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="list-wapper">
                    <h2>账户管理</h2>
                    <div class="line"></div>
                    <ul class="menu">
                        <li>
                            <a href="#">
                                账号绑定
                                <span class="iconfont icon-youjiantou"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="on">
                                个人信息
                                <span class="iconfont icon-youjiantou on"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                操作记录
                                <span class="iconfont icon-youjiantou"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                实名认证
                                <span class="iconfont icon-youjiantou"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                收件地址
                                <span class="iconfont icon-youjiantou"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="setting-right">
                <div class="setting-right-wrap">
                    <div class="formBox">
                        <div class="setting-profile">
                            <div class="edit-info">
                                <div class="moco-modal-title">
                                    <span>编辑个人信息</span>
                                    <a href="#" class="iconfont icon-cuowu-copy moco-modal-close"></a>
                                </div>
                                <div class="moco-modal-dialog">
                                    <form data-id="">
                                        <div class="moco-form-group">
                                            <label>昵称：</label>
                                            <div class="moco-control-input">
                                                <input type="text" autocomplete="off" value="" name="nickname"
                                                    placeholder="请输入昵称" class="moco-form-control nickname">
                                                <div class="errorHint"></div>
                                            </div>
                                        </div>

                                        <div class="moco-form-group">
                                            <label>职位：</label>
                                            <div class="moco-control-input">
                                                <select class="moco-form-control" name="position" id="job">
                                                    <option value="">请选择职位</option>
                                                    <option value="Python工程师">Python工程师</option>
                                                    <option value="页面重构设计">页面重构设计</option>
                                                    <option value="Web前端工程师">Web前端工程师</option>
                                                    <option value="JS工程师">JS工程师</option>
                                                    <option value="PHP开发工程师">PHP开发工程师</option>
                                                    <option value="JAVA开发工程师">JAVA开发工程师</option>
                                                    <option value="移动开发工程师">移动开发工程师</option>
                                                    <option value="软件测试工程师">软件测试工程师</option>
                                                    <option value="Linux系统工程师">Linux系统工程师</option>
                                                    <option value="产品经理">产品经理</option>
                                                    <option value="软件工程师">软件工程师</option>
                                                    <option value="数据库工程师">数据库工程师</option>
                                                    <option value="交互设计师">交互设计师</option>
                                                    <option value="UI设计师">UI设计师</option>
                                                    <option value="CG影视动画师">CG影视动画师</option>
                                                    <option value="全栈工程师">全栈工程师</option>
                                                    <option value="算法工程师">算法工程师</option>
                                                    <option value="架构师">架构师</option>
                                                    <option value="资深架构师">资深架构师</option>
                                                    <option value="学生">学生</option>
                                                </select>
                                                <div class="rlf-tip-wrap errorHint color-red">请选择一个选项</div>
                                                <div class="errorHint"></div>
                                            </div>
                                        </div>
                                        <div class="moco-form-group">
                                            <label>所在地区：</label>
                                            <div class="moco-control-input profile-address">
                                                <select name="region" class="moco-form-control" id="province">
                                                    <option value="请选择">请选择</option>
                                                </select>
                                                <select name="city" class="moco-form-control" id="city">
                                                    <option value="请选择">请选择</option>
                                                </select>
                                                <select name="area" class="moco-form-control" id="town">
                                                    <option value="请选择">请选择</option>
                                                </select>
                                                <div class="errorHint"></div>
                                            </div>
                                        </div>
                                        <div class="moco-form-group">
                                            <label>性别：</label>
                                            <div class="moco-control-input rlf-group">
                                                <label>
                                                    <input name="sex" value="保密" type="radio">保密
                                                </label>
                                                <label>
                                                    <input name="sex" value="男" type="radio">男
                                                </label>
                                                <label>
                                                    <input name="sex" value="女" type="radio">女
                                                    <div class="errorHint"></div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="moco-form-group">
                                            <label>个性签名：</label>
                                            <div class="moco-control-input">
                                                <div class="pr">
                                                    <textarea id="aboutme" name="profile"
                                                        class="moco-form-control"></textarea>
                                                    <p class="numCanInput">还可以输入128个字符</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="moco-form-group">
                                            <label></label>
                                            <div class="moco-control-input">
                                                <button href="#" type="submit" id="profile-submit"
                                                    class="moco-btn moco-btn-blue">确定</button>
                                                <a href="#" class="moco-btn moco-btn-normal">取消</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="common-title">
                                个人信息
                                <a href="#" class="pull-right">
                                    <i class="iconfont icon-bianji js-edit-info"></i>
                                    编辑
                                </a>
                            </div>
                            <div class="line"></div>
                            <div class="info-wapper">
                                <script type="text/html" id="tep-wapper">
                                    <div class="info-box">
                                        <label class="pull-left">昵称</label>
                                        <div class="pull-left">{{data.nickname == null ? '精慕门' : data.nickname}}</div>
                                    </div>
                                    <div class="info-box">
                                        <label class="pull-left">职位</label>
                                        <div class="pull-left">{{data.position == null ? '未设置' : data.position}}</div>
                                    </div>
                                    <div class="info-box">
                                        <label class="pull-left">城市</label>
                                        {{if data.region == ''}}
                                        <div class="pull-left">{{data.region == ''  ? '未设置' : data.region}}</div>
                                        {{else}}
                                        <div class="pull-left">{{data.region == '请选择'  ? '未设置' : data.region}}</div>
                                        {{/if}}
                                    </div>
                                    <div class="info-box">
                                        <label class="pull-left">性别</label>
                                        <div class="pull-left">{{data.sex == '' ? '未设置' : data.sex}}</div>
                                    </div>
                                    <div class="info-box">
                                        <label class="pull-left">个性签名</label>
                                        {{if data.profile == ''}}
                                        <div class="pull-left">{{data.profile == '' ? '未设置' : data.profile}}</div>
                                        {{else}}
                                        <div class="pull-left">{{data.profile == null ? '未设置' : data.profile}}</div>
                                        {{/if}}
                                    </div>
                                </script>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="keu">
        <div class="keu_container">
            <div class="idx_width">
                <div class="footer_sns">
                    <div class="i">
                        <a href="#" class="tao">
                            <i class="iconfont icon-xing"></i>
                        </a>
                        <p>收藏网站</p>
                        <div class="footer_sns_favorites_tips">
                            <span class="iconfont icon-xing1"></span>
                            使用
                            <b> Ctrl+D </b>
                            可将网站添加到书签
                        </div>
                    </div>
                    <div class="i">
                        <a href="#" class="icon_weixin">
                            <i class="iconfont icon-weixin1"></i>
                            <span class="footer_sns_weixin_expand"></span>
                        </a>
                        <p>官方公众号</p>
                    </div>
                    <div class="i">
                        <a href="#">
                            <i class="iconfont icon-sina"></i>
                        </a>
                        <p>官方微博</p>
                    </div>
                    <div class="i">
                        <a href="#">
                            <i class="iconfont icon-qq"></i>
                        </a>
                        <p>官方空间</p>
                    </div>
                </div>
            </div>
            <div class="footer_link">
                <a href="#">企业服务</a>
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">讲师招募</a>
                <a href="#">帮助中心</a>
                <a href="#">意见反馈</a>
                <a href="#">慕课大学</a>
                <a href="#">代码托管</a>
                <a href="#">友情链接</a>
            </div>
            <div class="footer_copyright">
                <P>Copyright <img class="moco_emoji"
                        src="https://www.imooc.com/static/moco/v1.0/images/face/36x36/a9.png" alt="">&nbsp;
                    2021 imooc.com &nbsp;京ICP备 12003892号-11&nbsp;
                    <a href="#">
                        <i class="beian"></i>
                        &nbsp;京公网安备11010802030151号&nbsp;</a>
                    <a href="#">营业执照</a>
                </P>
            </div>
        </div>
    </div>
    <div class="moco-modal-blackout"></div>
    <script src="/js//lib/jquery-3.6.0.min.js"></script>
    <script src="/js/lib/layui/layui.all.js"></script>
    <script src="/js/lib/area.js"></script>
    <script src="/js/lib/select.js"></script>
    <script src="/js/lib/template-web.js"></script>
    <script src="/js/BASE_API.js"></script>
    <script src="/js/user.js"></script>
</body>

</html>